<template>
  <div>
    <h1>欢迎页面</h1>
    <div ref="echart1" class="echart1"></div>
  </div>
</template>

<script setup>
  import * as echarts from 'echarts'
  import { onMounted, ref, onBeforeUnmount } from 'vue'
  import axios from 'axios'
  // echarts.registerMap("china", china);
  const echart1 = ref(null)
  let mychart1 //存储echarts实例
  // 请求数据的方法
  const getList = async () => {
    // 请求地图geojson
    const { data } = await axios.get(
      'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json'
    )
    // 注册地图
    echarts.registerMap('china', data)

    mychart1.setOption({
      series: [
        {
          type: 'map',
          map: 'china',
          roam: true, // 是否开启放大缩小/拖拽功能
          zoom: 1.2, // 缩放比列
          layoutCenter: ['50%', '50%'], // 地图中心点位置
          layoutSize: '100%',
          label: {
            show: true,
            color: '#fff',
          },
          itemStyle: {
            areaColor: '#12235c',
            borderColor: '#2ab8ff',
            borderWidth: 0.5,
            shadowColor: 'rgba(0,54,255, 0.4)',
            shadowBlur: 100,
          },
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(166, 200, 76, 0.82)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: 'z-index:100',
            formatter: function (e) {
              //根据业务自己拓展要显示的内容
              let res = ''
              const name = e.name
              res = `<span style='color:#fff;'>${e.name}`
              return res
            },
          },
          emphasis: {
            //区域激活时的样式
            itemStyle: {
              areaColor: '#02102b',
            },
            label: {
              color: '#fff',
            },
          },
        },
      ],
    })

    // 绑定事件
    // mychart1.on('click', (e) => {
    //   alert(e.name)
    // })
  }
  // 柱状
  onMounted(() => {
    // mychart1 = echarts.init(echart1.value, 'dark') //创建echarts实例
    mychart1 = echarts.init(echart1.value) //创建echarts实例

    getList()
  })

  // 监听窗口尺寸变化
  const resizeFn = () => {
    console.log('要干的事')
    // 调用echarts实例的resize方法
    mychart1.resize()
  }
  onMounted(() => {
    window.addEventListener('resize', resizeFn)
  })
  onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeFn)
  })
</script>

<style scoped>
  .echart1 {
    height: 600px;
    width: 100%;
  }
</style>
